<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>线路管理</title>
    <link th:include="common/header::copy"/>
    <script type="text/javascript">

        function formatOp(val,row,index){
            var str = '';
            if ($("#update").length > 0) {
                str += $.formatString('<a href="javascript:void(0)" class="role-easyui-linkbutton-edit"  onclick="editFun(\'{0}\');" >编辑</a>', index);
            }
            return str;
        }

        function search(){
            $("#dg").datagrid('load',{
                "pname":$("#s_pname").val(),
                "rname":$("#s_rname").val(),
                "isover":$("#s_isover").val()
            });
        }

        function resetValue(){
            $("#id").val("");
            $("#pname").val("");
            $("#startAddress").val("");
            $("#endAddress").val("");
            $("#partya").val("");
            $("#isover").val("");
        }

        function editFun(index){
            $("#dg").datagrid('selectRow',index);
            var row =$("#dg").datagrid('getSelected');
            $("#dlg").dialog("open").dialog("setTitle", "修改角色信息");
            $("#fm").form("load", row);
        }

        function openAddDialog(){
            $("#dlg").dialog("open").dialog("setTitle","添加项目信息");
        }

        function cellStyler(value){
            if (value ==true){
                return '<span style="color: greenyellow">已经结束</span>';
            }else{
                return '<span style="color: red">未结束</span>';
            }
        }

    </script>
</head>
<body style="margin: 1px">
<shiro:hasPermission name="pro:route:save">
    <input type="hidden" id="update"/>
</shiro:hasPermission>
<table id="dg" title="线路信息" class="easyui-datagrid"
       fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
       url="/pro/route/list" fit="true" toolbar="#tb" method="post" striped="true">
    <thead>
    <th field="id" width="20" align="center" hidden="true">编号</th>
    <th field="pname" width="100" align="center" readonly="true">项目名称</th>
    <th field="rname" width="80" align="center">线路名称</th>
    <th field="partya" width="80" align="center" readonly="true">甲方名称</th>
    <th field="startAddress" width="100" align="center" readonly="true">起始地址</th>
    <th field="endAddress" width="100" align="center" readonly="true">目的地址</th>
    <th field="isover" width="100" align="center" formatter="cellStyler" readonly="true">是否结束</th>
    <th field="op" width="100" align="center" formatter="formatOp">操作</th>
    </thead>
</table>

<div id="tb">
    <div style="display: inline-block;">
        <a href="javascript:openAddDialog();" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:search();" class="easyui-linkbutton" data-options="plain:true"
           onclick="$('#dg').datagrid('toExcel','project.xls')">导出</a>
    </div>
    <div style="display: inline-block; float: right;">
        项目名称：&nbsp;<input type="text" id="s_pname" size="30"/>
        线路名称：<input type="text" id="s_rname" size="30"/>
        是否结束：<input type="text" id="s_isover" size="30"/>
        <a href="javascript:search();" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog" style="width: 550px;height: 350px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
    <form id="fm" method="post">
        <input type="hidden" id="id" name="id">
        <table cellspacing="8px">
            <tr>
                <div>
                    <input class="easyui-combobox"
                           label="项目名称:"
                           style="width:200px"
                           name="projectId"
                           data-options="
                        url:'/pro/route/getproject',
                        method:'get',
                        valueField:'id',
                        textField:'pname',
                        panelHeight:'auto'">
                </div>
            </tr>
            <tr>
                <td>线路名称：</td>
                <td>
                    <input type="text" id="rname" name="rname" class="easyui-validatebox" required="true" style="width: 250px"/>
                </td>
            </tr>
            <tr>
                <td>线路描述：</td>
                <td>
                    <input type="text" id="routeInstruction" name="routeInstruction" class="easyui-validatebox" required="true" style="width: 250px"/>
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:save('/pro/route/save','保存成功')" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
    <a href="javascript:closeDialog('#dlg')" class="easyui-linkbutton" iconCls="icon-cancel" >关闭</a>
</div>
<script type="text/javascript">
    $(function () {
        $("#dg").datagrid({
            onLoadSuccess: function (data) {
                $('.role-easyui-linkbutton-edit').linkbutton({text: '编辑', plain: true, iconCls: 'icon-edit'});
                $('#dg').datagrid('fixRowHeight');
            }
        });
    })
</script>
</body>
</html>